import {defineStore} from 'pinia';
import {store} from '@/store';
import {setCssVar, humpToUnderline} from '@/utils';
import {ElMessage} from 'element-plus';
import {useCache} from '@/hooks/web/useCache';
import CacheKeys from '@/constants/CacheKeys';
import {ElementPlusSize} from '@/types/elementPlus';
import {LayoutType} from '@/types/layout';
import {ThemeTypes} from '@/types/theme';

const {wsCache} = useCache();

const defaultTheme: ThemeTypes | Record<string, any> = {
    // 主题色
    elColorPrimary: '#409eff',
    // 左侧菜单边框颜色
    leftMenuBorderColor: 'inherit',
    // 左侧菜单背景颜色
    leftMenuBgColor: '#001529',
    // 左侧菜单浅色背景颜色
    leftMenuBgLightColor: '#0f2438',
    // 左侧菜单选中背景颜色
    leftMenuBgActiveColor: 'var(--el-color-primary)',
    // 左侧菜单收起选中背景颜色
    leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
    // 左侧菜单字体颜色
    leftMenuTextColor: '#bfcbd9',
    // 左侧菜单选中字体颜色
    leftMenuTextActiveColor: '#fff',
    // logo字体颜色
    logoTitleTextColor: '#fff',
    // logo边框颜色
    logoBorderColor: 'inherit',
    // 头部背景颜色
    topHeaderBgColor: '#fff',
    // 头部字体颜色
    topHeaderTextColor: 'inherit',
    // 头部悬停颜色
    topHeaderHoverColor: '#f6f6f6',
    // 头部边框颜色
    topToolBorderColor: '#eee',
};

interface AppState {
    breadcrumb: boolean;
    breadcrumbIcon: boolean;
    collapse: boolean;
    uniqueOpened: boolean;
    hamburger: boolean;
    fullScreen: boolean;
    search: boolean;
    size: boolean;
    locale: boolean;
    message: boolean;
    tagsView: boolean;
    tagsViewIcon: boolean;
    logo: boolean;
    fixedHeader: boolean;
    greyMode: boolean;
    pageLoading: boolean;
    layout: LayoutType;
    title: string;
    userInfo: string;
    isDark: boolean;
    currentSize: ElementPlusSize;
    sizeMap: ElementPlusSize[];
    mobile: boolean;
    footer: boolean;
    theme: ThemeTypes;
    fixedMenu: boolean;
}

export const useAppStore = defineStore('app', {
    state: (): AppState => {
        return {
            userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
            sizeMap: ['default', 'large', 'small'],
            mobile: false, // 是否是移动端
            title: import.meta.env.VITE_APP_TITLE, // 标题
            pageLoading: false, // 路由跳转loading
            breadcrumb: true, // 面包屑
            breadcrumbIcon: true, // 面包屑图标
            collapse: false, // 折叠菜单
            uniqueOpened: true, // 是否只保持一个子菜单的展开
            hamburger: true, // 折叠图标
            fullScreen: false, // 全屏图标
            search: false, // 搜索图标
            size: false, // 尺寸图标
            locale: false, // 多语言图标
            message: false, // 消息图标
            tagsView: true, // 标签页
            tagsViewIcon: true, // 是否显示标签图标
            logo: true, // logo
            fixedHeader: true, // 固定toolHeader
            footer: true, // 显示页脚
            greyMode: false, // 是否开始灰色模式，用于特殊悼念日
            fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单
            layout: wsCache.get(CacheKeys.SYS_LAYOUT) || 'classic', // layout布局
            // isDark: wsCache.get(CacheKeys.IS_DARK) || false, // 是否是暗黑模式
            isDark: false,
            currentSize: wsCache.get('default') || 'default', // 组件尺寸
            theme: wsCache.get(CacheKeys.SYS_THEME) || defaultTheme,
        };
    },
    getters: {
        getBreadcrumb(): boolean {
            return this.breadcrumb;
        },
        getBreadcrumbIcon(): boolean {
            return this.breadcrumbIcon;
        },
        getCollapse(): boolean {
            return this.collapse;
        },
        getUniqueOpened(): boolean {
            return this.uniqueOpened;
        },
        getHamburger(): boolean {
            return this.hamburger;
        },
        getFullScreen(): boolean {
            return this.fullScreen;
        },
        getSize(): boolean {
            return this.size;
        },
        getLocale(): boolean {
            return this.locale;
        },
        getMessage(): boolean {
            return this.message;
        },
        getTagsView(): boolean {
            return this.tagsView;
        },
        getTagsViewIcon(): boolean {
            return this.tagsViewIcon;
        },
        getLogo(): boolean {
            return this.logo;
        },
        getFixedHeader(): boolean {
            return this.fixedHeader;
        },
        getGreyMode(): boolean {
            return this.greyMode;
        },
        getFixedMenu(): boolean {
            return this.fixedMenu;
        },
        getPageLoading(): boolean {
            return this.pageLoading;
        },
        getLayout(): LayoutType {
            return this.layout;
        },
        getTitle(): string {
            return this.title;
        },
        getUserInfo(): string {
            return this.userInfo;
        },
        getIsDark(): boolean {
            return this.isDark;
        },
        getCurrentSize(): ElementPlusSize {
            return this.currentSize;
        },
        getSizeMap(): ElementPlusSize[] {
            return this.sizeMap;
        },
        getMobile(): boolean {
            return this.mobile;
        },
        getTheme(): ThemeTypes {
            return this.theme;
        },
        getFooter(): boolean {
            return this.footer;
        },
    },
    actions: {
        setBreadcrumb(breadcrumb: boolean) {
            this.breadcrumb = breadcrumb;
        },
        setBreadcrumbIcon(breadcrumbIcon: boolean) {
            this.breadcrumbIcon = breadcrumbIcon;
        },
        setCollapse(collapse: boolean) {
            this.collapse = collapse;
        },
        setUniqueOpened(uniqueOpened: boolean) {
            this.uniqueOpened = uniqueOpened;
        },
        setHamburger(hamburger: boolean) {
            this.hamburger = hamburger;
        },
        setFullScreen(fullScreen: boolean) {
            this.fullScreen = fullScreen;
        },
        setSize(size: boolean) {
            this.size = size;
        },
        setLocale(locale: boolean) {
            this.locale = locale;
        },
        setMessage(message: boolean) {
            this.message = message;
        },
        setTagsView(tagsView: boolean) {
            this.tagsView = tagsView;
        },
        setTagsViewIcon(tagsViewIcon: boolean) {
            this.tagsViewIcon = tagsViewIcon;
        },
        setLogo(logo: boolean) {
            this.logo = logo;
        },
        setFixedHeader(fixedHeader: boolean) {
            this.fixedHeader = fixedHeader;
        },
        setGreyMode(greyMode: boolean) {
            this.greyMode = greyMode;
        },
        setFixedMenu(fixedMenu: boolean) {
            wsCache.set('fixedMenu', fixedMenu);
            this.fixedMenu = fixedMenu;
        },
        setPageLoading(pageLoading: boolean) {
            this.pageLoading = pageLoading;
        },
        // 设置布局模式
        setLayout(layout: LayoutType) {
            if (this.mobile && layout !== 'classic') {
                ElMessage.warning('移动端模式下不支持切换其他布局');
                return;
            }
            this.layout = layout;
            wsCache.set(CacheKeys.SYS_LAYOUT, this.layout);
        },
        setTitle(title: string) {
            this.title = title;
        },
        setIsDark(isDark: boolean) {
            this.isDark = isDark;
            if (this.isDark) {
                document.documentElement.classList.add('dark');
                document.documentElement.classList.remove('light');
            } else {
                document.documentElement.classList.add('light');
                document.documentElement.classList.remove('dark');
            }
            wsCache.set(CacheKeys.IS_DARK, this.isDark);
        },
        setCurrentSize(currentSize: ElementPlusSize) {
            this.currentSize = currentSize;
            wsCache.set('currentSize', this.currentSize);
        },
        setMobile(mobile: boolean) {
            this.mobile = mobile;
        },
        setTheme(theme: ThemeTypes) {
            this.theme = Object.assign(this.theme, theme);
            // 更新缓存
            wsCache.set(CacheKeys.SYS_THEME, this.theme);
        },
        setCssVarTheme() {
            for (const key in this.theme) {
                setCssVar(`--${humpToUnderline(key)}`, this.theme[key]);
            }
        },
        setFooter(footer: boolean) {
            this.footer = footer;
        },
    },
});

export const useAppStoreWithOut = () => {
    return useAppStore(store);
};
